<template>
  <div ref="chart" class="charts chart-pie"></div>
</template>
<script>
export default {
  name: 'sciecle',
  props: {
    overtime: Number,
    maxNum: { type: Number, default: 100 },
    bgColor: {
      type: String,
      default: '#cecece'
    },
    color1: {
      type: String,
      default: '#E28556'
    },
    color2: {
      type: String,
      default: '#E2A856'
    },
    titleShow: {
      type: Boolean,
      default: false
    },
    pieSize: {
      type: String,
      default: '120'
    }
  },
  watch: {
    overtime(newVal) {
      console.log(newVal)
      this.overtime = newVal
      this.getEchartData()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getEchartData()
    })
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        let data
        let offsetCenter
        let offsetCenter1
        let topdata
        if (this.titleShow) {
          data = ((this.overtime / this.maxNum) * 100).toFixed(2)
          offsetCenter = -7
          offsetCenter1 = 15
          topdata = '110%'
        } else {
          data = this.overtime
          offsetCenter = 0
          offsetCenter1 = 20
          topdata = '90%'
        }
        const option = {
          title: [
            {
              show: this.titleShow,
              text: '%',
              left: '54%',
              bottom: '16%',
              textStyle: {
                color: this.color2
              }
            },
            {
              show: this.titleShow,
              text: '处置率',
              left: '45%',
              bottom: '0%',
              textStyle: {
                color: 'rgba(0, 0, 0, 0.45)',
                fontSize: 12,
                fontWeight: 400
              }
            }
          ],
          angleAxis: {
            show: false,
            max: (this.maxNum * 360) / 180, // -45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 180, // 极坐标初始角度
            splitLine: {
              show: false
            }
          },
          barMaxWidth: 10, // 圆环宽度
          radiusAxis: {
            show: false,
            type: 'category'
          },
          // 圆环位置和大小
          polar: {
            center: ['50%', topdata],
            radius: this.pieSize
          },
          series: [
            {
              type: 'bar',
              data: [
                {
                  // 上层圆环，显示数据
                  value: this.overtime,
                  itemStyle: {
                    color: {
                      // 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1, // 从左到右 0-1
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: this.color1
                        },
                        {
                          offset: 1,
                          color: this.color2
                        }
                      ]
                    }
                  }
                }
              ],
              barGap: '100%', // 柱间距离,上下两层圆环重合
              coordinateSystem: 'polar',
              roundCap: true, // 顶端圆角从 v4.5.0 开始支持
              z: 2 // 圆环层级，同zindex
            },
            {
              // 下层圆环，显示最大值
              type: 'bar',
              data: [
                {
                  value: this.maxNum,
                  itemStyle: {
                    color: this.bgColor
                  }
                }
              ],
              barGap: '-90%',
              barWidth: 10,
              coordinateSystem: 'polar',
              roundCap: true,
              z: 1
            },
            // 超时事件
            {
              name: '超时事件',
              type: 'gauge',
              startAngle: 225, // 起始角度，同极坐标
              endAngle: -45, // 终止角度，同极坐标
              axisLine: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitLabel: {
                show: false
              },
              pointer: {
                show: false
              },
              title: {
                offsetCenter: [-30, -50],
                color: this.color2,
                fontSize: 40,
                fontFamily: 'iconfont',
                rich: {
                  a: {
                    fontSize: 40,
                    fontFamily: 'iconfont',
                    color: '#E28556',
                    padding: [0, 0, 10, 40]
                  }
                }
              },
              detail: {
                color: this.color2,
                fontSize: 20,
                fontFamily: 'iconfont',
                offsetCenter: [offsetCenter, offsetCenter1],
                padding: [4, 52]
              },
              data: [
                {
                  value: data
                }
              ]
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 180px;
}
</style>
